<template>
  <div class="contentleft">
    <div class="photo">
      <img
        src="../static/images/header-photo.jpg"
        alt="头像"
        class="photo-img"
      />
    </div>
    <div class="fill"></div>
    <div class="info">
      <div class="row">
        <el-icon :size="20" color="white"><Postcard /></el-icon>
        <label for="">姓名:</label>
        <text>许小浩</text>
      </div>
      <div class="row">
        <el-icon :size="20" color="white">
          <Calendar />
        </el-icon>
        <label for="">年龄:</label>
        <text>21</text>
      </div>
      <div class="row">
        <el-icon :size="20" color="white"><Male /></el-icon>
        <label for="">性别:</label>
        <text>男</text>
      </div>
      <div class="row">
        <el-icon :size="20" color="white"><Location /></el-icon>
        <label for="">所在地:</label>
        <text>汕头</text>
      </div>
      <div class="row">
        <el-icon :size="20" color="white"><Iphone /></el-icon>
        <label for="">电话:</label>
        <text>1008611</text>
      </div>
      <div class="row">
        <el-icon :size="20" color="white"><Message /></el-icon>
        <label for="">邮箱:</label>
        <text>1694888739@qq.com</text>
      </div>
    </div>
  </div>
</template>
<script setup>
</script>
<style scoped lang='scss'>
.contentleft {
  width: 40%;
  display: flex;
  min-height: 1094.5px;
  flex-direction: column;
  position: relative;
  border-right: 1px solid #abb;
  background: #254665;
  .photo {
    width: 100%;
    display: flex;
    position: absolute;
    top: 50px;
    justify-content: center;
    .photo-img {
      width: 100px;
      border-radius: 50%;
    }
  }
  .fill {
    width: 100%;
    height: 230px;
  }
  .info{
     display: flex;
     flex-direction: column;
     width: 100%;
     gap: 10px;
     .row{
         display: flex;
         width: 100%;
         justify-content: center;
         align-content: center;
         label{
            width: 60px;
            color: #ffffff;
            font-weight: bold;
         }
         text{
            width: 100px;
            color: #ffffff;
         }
     }
  }
}
</style>
